<template>
  <div class="fans-container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- card body -->
      <el-tabs v-model="activeName" type="card" @tab-click="switchTab">
        <el-tab-pane label="粉丝列表" name="list">
          <el-row :gutter="10">
            <el-col
              v-for="fan in fans"
              :key="fan.id.toString()"
              :xs="6"
              :sm="4"
              :md="4"
              :lg="4"
            >
              <div class="fan-item">
                <el-avatar
                  icon="el-icon-user-solid"
                  :size="80"
                  shape="circle"
                  :src="fan.photo"
                  fit="fill"
                ></el-avatar>
                <p>{{ fan.name }}</p>
                <el-button type="primary" plain size="small">+关注</el-button>
              </div>
            </el-col>
          </el-row>
          <!-- 分页 -->
          <el-pagination
            class="pages"
            background
            layout="prev, pager, next, total"
            :total="total"
            :page-size="pageCount"
            @current-change="pageChange"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="chart">
          <div class="chart-container">
            <div ref="chartBox" class="chartBox"></div>
            <div ref="pieBox" class="chartBox"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// getFansStatistics
import { getFans, getFansStatistics } from '@/api/fans'
// 导入echarts
import echarts from 'echarts'
export default {
  data () {
    return {
      // 当前选中
      activeName: 'list',
      // 粉丝
      fans: [],
      // 总粉丝数量
      total: 0,
      // 当前页码
      page: 1,
      // 每页显示条数
      pageCount: 24
    }
  },
  created () {
    this.getFans()
  },
  // mounted () {
  //   this.getChartData()
  // },
  methods: {
    // 切换标签页事件
    switchTab (e) {
      // console.log(e.name)
      if (e.name === 'chart') {
        this.getChartData()
      }
    },
    // 获取图表数据
    async getChartData () {
      try {
        const { data: { data } } = await getFansStatistics()
        console.log(data)

        this.initCharts(data)
        this.initPie(data)
      } catch (error) {
        console.warn('假数据走起～')
        const data = {
          gender: {
            male: 68,
            female: 94
          },
          age: {
            le18: 72,
            le23: 88,
            le30: 74,
            le40: 50,
            le50: 68,
            gt50: 88
          },
          device: {
            ios: 45,
            android: 99
          }
        }
        this.initCharts(data)
        this.initPie(data)
      }
    },
    // 初始化图表=>柱状
    initCharts (data) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chartBox)
      const ages = data.age; const ageX = []; const ageY = []
      for (const key in ages) {
        ageY.push(ages[key])
        ageX.push(key.replace('le', '小于').replace('gt', '大于') + '岁')
      }
      // 配置节点
      const option = {
        title: {
          text: '年龄分布',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ageX
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: ageY,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }]
      }
      // 绘制图表
      myChart.setOption(option)
    },
    // 饼图
    initPie (data) {
      const myChart = echarts.init(this.$refs.pieBox)
      const gender = data.gender; const genderValues = []
      for (const key in gender) {
        genderValues.push({ value: gender[key], name: key === 'female' ? '女性' : '男性' })
      }
      const option = {
        title: {
          text: '性别分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '粉丝来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: genderValues

          }
        ]
      }

      // 绘制图表
      myChart.setOption(option)
    },
    // 获取粉丝列表
    async getFans () {
      const { data: { data } } = await getFans({
        page: this.page,
        per_page: this.pageCount
      })
      console.log(data)
      this.total = data.total_count
      this.fans = data.results
    },
    // 切换页
    pageChange (curPage) {
      this.page = curPage
      this.getFans()
    }
  }
}
</script>

<style lang="less" scoped>
.fan-item {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #eee;
  height: 200px;
  p {
    margin: 10px;
  }
}
.chart-container {
  display: flex;
  justify-content: space-between;
  .chartBox {
    flex: 1;
    height: 600px;
  }
}
</style>
